﻿@model ShopBarModel

@{
    string accountUrl = Model.IsAuthenticated ? Url.Action("Info", "Customer") : Url.RouteUrl("Login", new { returnUrl = Context.Request.Query["returnUrl"].ToString() });
    var labelStyle = Display.GetThemeVariable<string>("shopbar-label", "warning");
    var numTools = 2 + (Model.CompareProductsEnabled ? 1 : 0) + (Model.WishlistEnabled ? 1 : 0) + (Model.ShoppingCartEnabled ? 1 : 0);

    var badgeCssClasses = "badge badge-pill badge-counter badge-counter-ring label-cart-amount badge-" + labelStyle;

    var offcanvasAttributes = new AttributeDictionary
    {
        ["data-toggle"] = "offcanvas",
        ["data-autohide"] = "true",
        ["data-fullscreen"] = "false",
        ["data-disablescrolling"] = "true",
        ["aria-expanded"] = "false"
    };

    var cartTogglerAttributes = new AttributeDictionary();
    cartTogglerAttributes.AddRange(offcanvasAttributes);
    cartTogglerAttributes.Add("class", "shopbar-button navbar-toggler");
    cartTogglerAttributes.Add("data-placement", "end");
    cartTogglerAttributes.Add("data-target", "#offcanvas-cart");
    cartTogglerAttributes.Add("aria-controls", "offcanvas-cart");
}

<div class="shopbar-col shopbar-tools"
     attr-style='(numTools == 5, "--sb-tool-padding-x: 0.25rem")'
     data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { cart = Model.ShoppingCartEnabled, wishlist = Model.WishlistEnabled, compare = Model.CompareProductsEnabled })">

    @*Hamburger Menu*@
    <div class="shopbar-tool d-lg-none" id="shopbar-menu">
        <a id="offcanvas-menu-opener" 
           class="shopbar-button" 
           href="#" 
           attrs="offcanvasAttributes"
           data-placement="start" 
           data-target="#offcanvas-menu"
           aria-controls="offcanvas-menu">
            <span class="shopbar-button-icon" aria-hidden="true">
                <i class="icm icm-menu"></i>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Common.Menu")
            </span>
        </a>
    </div>

    <zone name="shopbar_tools_before" preview-style="max-width: 106px"></zone>

    @*User*@
    <div class="shopbar-tool d-lg-none" id="shopbar-user">
        <a class="shopbar-button" href="@accountUrl">
            <span class="shopbar-button-icon" aria-hidden="true">
                <i class="icm icm-user"></i>
            </span>
            <span class="shopbar-button-label-sm">
                @T(Model.IsAuthenticated ? "Account.MyAccount" : "Account.Login")
            </span>
        </a>
    </div>

    <div sm-if="Model.CompareProductsEnabled" class="shopbar-tool" id="shopbar-compare" data-target="#compare-tab">
        <a asp-action="CompareProducts" asp-controller="Catalog" asp-area="" attrs="cartTogglerAttributes" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { compare = true })">
            <span class="shopbar-button-icon" aria-hidden="true">
                <i class="icm icm-repeat"></i>
                <span class='@badgeCssClasses' attr-style='(Model.CompareItemsCount == 0, "display: none")' data-bind-to="CompareItemsCount">
                    @Model.CompareItemsCount
                </span>
            </span>
            <span class="shopbar-button-label" aria-label="@T("Common.Shopbar.Compare")">
                <span>@T("Common.Shopbar.CompareProductsPartOne")</span><br />
                <strong>@T("Common.Shopbar.CompareProductsPartTwo")</strong>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Common.Shopbar.Compare")
            </span>
        </a>
    </div>

    <div sm-if="Model.WishlistEnabled" class="shopbar-tool" id="shopbar-wishlist" data-target="#wishlist-tab">
        <a asp-route="Wishlist" attrs="cartTogglerAttributes" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { wishlist = true })">
            <span class="shopbar-button-icon" aria-hidden="true">
                <i class="icm icm-heart"></i>
                <span class='@badgeCssClasses' attr-style='(Model.WishlistItemsCount == 0, "display: none")' data-bind-to="WishlistItemsCount">
                    @Model.WishlistItemsCount
                </span>
            </span>
            <span class="shopbar-button-label" aria-label="@T("Wishlist")">
                <span>@T("Common.Shopbar.WishlistPartOne")</span><br />
                <strong>@T("Common.Shopbar.WishlistPartTwo")</strong>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Wishlist")
            </span>
        </a>
    </div>

    <div sm-if="Model.ShoppingCartEnabled" class="shopbar-tool" id="shopbar-cart" data-target="#cart-tab">
        <a asp-route="ShoppingCart" attrs="cartTogglerAttributes" data-summary-href="@Url.Action("CartSummary", "ShoppingCart", new { cart = true })">
            <span class="shopbar-button-icon" aria-hidden="true">
                <i class="icm icm-bag"></i>
                <span class='@badgeCssClasses' attr-style='(Model.CartItemsCount == 0, "display: none")' data-bind-to="CartItemsCount">
                    @Model.CartItemsCount
                </span>
            </span>
            <span class="shopbar-button-label" aria-label="@T("Common.Shopbar.Basket")">
                <span>@T("Common.Shopbar.BasketPartOne")</span><br />
                <strong>@T("Common.Shopbar.BasketPartTwo")</strong>
            </span>
            <span class="shopbar-button-label-sm">
                @T("Common.Shopbar.Basket")
            </span>
        </a>
    </div>

    <zone name="shopbar_tools_after" preview-style="max-width: 106px"></zone>
</div>

<widget target-zone="end" key="offcanvas-menu">
    <aside id="offcanvas-menu" 
           class="offcanvas offcanvas-shadow" 
           data-blocker="true" 
           data-overlay="true" 
           aria-hidden="true" 
           aria-labelledby="offcanvas-menu-opener" 
           tabindex="-1">
        <div class="offcanvas-content">
            <div id="offcanvas-menu-container" data-url="@(Url.Action("OffCanvas", "Menu"))">
                @*Ajax content will be rendered here*@
            </div>
        </div>
    </aside>
</widget>

<widget target-zone="end" key="offcanvas-cart">
    <aside id="offcanvas-cart" 
           class="offcanvas offcanvas-end offcanvas-lg offcanvas-shadow" 
           data-lg="true" 
           data-blocker="true" 
           data-overlay="true"           
           aria-label="@T("Aria.Label.OffCanvasCartTab")"
           tabindex="-1">
        <div class="offcanvas-content">
            @await Component.InvokeAsync("OffCanvasCart")
        </div>
    </aside>
    @*TODO: (mh) (core) This is problematic!!! Scripts are there before widget was rendered thus they won't become initialized correctly*@
    <script src="~/js/public.offcanvas-cart.js" asp-append-version="true"></script>
</widget>